<style lang=less>
	@import '../../assets/public.less';
	@import './fbOrder.less';
</style>
<template>
	<div class="fb_order_wrapper">
		<!--<HeaDer></HeaDer>-->
		<div class="order_container">
			<el-card class="content">
				<el-tabs v-model="activeName" class="deal_tables" @tab-click="handleClick">
					<!--购买明细-->
					<el-tab-pane :label="$t('fbOrder.header[0]')" name="first">
						<el-table :data="requestData1" style="width: 100%" height="600">
							<el-table-column prop="order_num" :label="$t('fbOrder.conent[0]')" width="220">
							</el-table-column>
							<el-table-column prop="add_time" :label="$t('fbOrder.conent[1]')" width="220">
								<template slot-scope="scope">
									<div>{{ $public.timestampToTime(scope.row.add_time) }}</div>
								</template>
							</el-table-column>
							<!--价格-->
							<el-table-column prop="price" :label="$t('fbOrder.conent[2]')">
							</el-table-column>
							<!--数量-->
							<el-table-column prop="total_num" :label="$t('fbOrder.conent[3]')">
							</el-table-column>
							<el-table-column prop="total_price" :label="$t('fbOrder.conent[4]')">
							</el-table-column>
							 <el-table-column prop="sxfee" :label="$t('fbOrder.conent[5]')">
							</el-table-column> 
							<!--<el-table-column :label="$t('fbOrder.conent[5]')">
								<template slot-scope="scope">
									<div>--</div>
								</template>
							</el-table-column>-->
							<el-table-column prop="status" :label="$t('fbOrder.conent[6]')">
								
								<!--待付款', '已付款', '已确认', '申诉中', '取消',-->
								<template slot-scope="scope">
									<div v-if="scope.row.status == 1" >{{$t('fbOrder.conent[7]')}}</div>
									<div v-if="scope.row.status == 2">{{$t('fbOrder.conent[8]')}}</div>
									<div v-if="scope.row.status == 3">{{$t('fbOrder.conent[9]')}}</div>
									<div v-if="scope.row.status == 4">{{$t('fbOrder.conent[10]')}}</div>
									<div v-if="scope.row.status == 5">{{$t('fbOrder.conent[11]')}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="id" :label="$t('fbOrder.conent[12]')">
								<template slot-scope="scope">
									<el-button type="primary" plain size="small" @click="linkOrdersFun(scope.row)">
										<span>{{$t('fbOrder.conent[13]')}}</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<!--出售明细-->
					<el-tab-pane :label="$t('fbOrder.header[1]')" name="second">
						<el-table :data="requestData2" style="width: 100%" height="600">
							<el-table-column prop="order_num" :label="$t('fbOrder.conent[0]')" width="220">
							</el-table-column>
							<el-table-column prop="add_time" :label="$t('fbOrder.conent[1]')" width="220">
								<template slot-scope="scope">
									<div>{{ $public.timestampToTime(scope.row.add_time) }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="price" :label="$t('fbOrder.conent[2]')">
							</el-table-column>
							<el-table-column prop="total_num" :label="$t('fbOrder.conent[3]')">
							</el-table-column>
							<el-table-column prop="total_price" :label="$t('fbOrder.conent[4]')">
							</el-table-column>
							<el-table-column prop="sxfee" :label="$t('fbOrder.conent[5]')">
							</el-table-column>
							<!--<el-table-column :label="$t('fbOrder.conent[5]')">
								<template slot-scope="scope">
									<div>--</div>
								</template>
							</el-table-column>-->
							<el-table-column prop="status" :label="$t('fbOrder.conent[6]')">
								<!--待付款', '已付款', '已确认', '申诉中', '取消',-->
								<template slot-scope="scope">
									<div v-if="scope.row.status == 1" >{{$t('fbOrder.conent[7]')}}</div>
									<div v-if="scope.row.status == 2">{{$t('fbOrder.conent[8]')}}</div>
									<div v-if="scope.row.status == 3">{{$t('fbOrder.conent[9]')}}</div>
									<div v-if="scope.row.status == 4">{{$t('fbOrder.conent[10]')}}</div>
									<div v-if="scope.row.status == 5">{{$t('fbOrder.conent[11]')}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="id" :label="$t('fbOrder.conent[12]')">
								<template slot-scope="scope">
									<el-button type="primary" plain size="small" @click="linkOrdersFun(scope.row)">
										<span>{{$t('fbOrder.conent[13]')}}</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>




				</el-tabs>
				<div class="right" style="display: none;">
					<div class="bitType">{{$t('fbOrder.header[2]')}}</div>
					<span>/</span>
					<el-select disabled v-model="selectValue" :placeholder="$t('fbOrder.header[3]')">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</el-card>
		</div>
		<!--<FooTer></FooTer>-->
	</div>
</template>
<script>
//import Header from "../../header/heaer.vue";
//import Footer from "../../footer/footer.vue";
export default {
	data() {
		return {
			isActive: true,
			show: true,
			activeName: 'first',
			options: [{
				value: 'USDT',
				label: 'USDT'
			}],
			selectValue: 'USDT',
			requestData1: [],
 			requestData2: [],
		}
	},
	methods: {
		handleClick(tab, event) { // 切换事件
			var _this = this;
			if(_this.activeName == 'first'){
				_this.requestPublic('requestData1','getFbMx_pmma');
			} else {
				_this.requestPublic('requestData2','getFbMx_sell');
			}
		},
		requestPublic:function (status,url) {
			var _this = this;
			_this.$http.get(_this.$http[eval('url')], {params: {}})
			.then((res) => {
				_this[eval('status')] = res.data.data.res;
			});
		},
		linkOrdersFun:function (res) {
			var _this = this;
			var data = {};
			data.data = res;
			_this.$router.push({path: '/frenchorder'});
			window.sessionStorage.order = escape(JSON.stringify(data));
		},
		
	},
	created: function() {
		var _this = this;
		_this.requestPublic('requestData1','getFbMx_pmma');
	},
//	components: {
//		"HeaDer": Header,
//		"FooTer": Footer,
//	}
}
</script>
<style>
.demo-table-expand {
	font-size: 0;
}
.demo-table-expand label {
	width: 90px;
	color: #99a9bf;
}
.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}
</style>